<template>
        <div class="Bread">
                <el-breadcrumb separator="/">
                        <el-breadcrumb-item>组织管理</el-breadcrumb-item>
                        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
                </el-breadcrumb>
        </div>
        <div class="SearchBox">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="2%" class="demo-ruleForm">
                        <el-form-item prop="SearchMenuData">
                                <el-input class="SearchDataBox" placeholder="请输入菜品名称" v-model="ruleForm.SearchMenuData" />
                        </el-form-item>
                </el-form>
                <div>
                        <el-button type="primary" @click="submitForm">
                                搜索
                        </el-button>
                        <el-button type="round" @click="resetForm">
                                重置
                        </el-button>
                </div>
        </div>
        <div class="NewBtn">
                <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                        新增菜单
                </el-button>
                <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                        <span>Hi there!</span>
                </el-drawer>
                <el-button type="primary">新增按钮权限</el-button>
        </div>
        <div class="Table">
                <el-table :data="tableData1" style="width: 100%" row-key="id" border :load="load" lazy
                        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                        <el-table-column prop="title" label="名称" />
                        <el-table-column prop="type" label="类型" />
                        <el-table-column prop="path" label="路由路径" />
                        <el-table-column prop="permissionName" label="权限名称" />
                        <el-table-column label="操作">
                                <template #default="scope">
                                        <el-button type="primary" @click="Current(scope.$index)">
                                                编辑
                                        </el-button>
                                        <el-popconfirm @confirm="handleClick(scope.row)" title="您确定要删除吗?">
                                                <template #reference>
                                                        <el-button type="danger">删除</el-button>
                                                </template>
                                        </el-popconfirm>
                                </template>
                        </el-table-column>
                </el-table>
        </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue'
// import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';

const drawer = ref(false)
const router = useRouter();
//获取el-form的实例对象
const ruleFormRef = ref<FormInstance>()
//表单值
const ruleForm = reactive({
        SearchMenuData: '',
})
const handleClick = (scoped: any) => {
        console.log('click', scoped)
}
const rules = reactive<FormRules>({
        SearchMenuData: { required: true, message: '请输入菜品名称' }
})

function submitForm() {
        console.log(ruleForm);
}
function resetForm() {
        ruleForm.SearchMenuData = ""
}
function Current(e: any) {
        console.log(e);

}

interface User {
        id: string;//数据库id
        key: string;
        type: "menu" | "permission",//类型是菜单是按钮
        title: string;
        path?: string;//菜单路径
        icon?: string;//菜单左侧的图标名称
        permissionName: string;//对应的权限名称 、比如删除账号：permission对应的值可能是user:del
        children?: User[];
        parentId?: string;//当有children时，必然有一个parentId

}
const load = (
        row: User,
        treeNode: unknown,
        resolve: (date: User[]) => void
) => {
        setTimeout(() => {
                resolve([
                        // {
                        //         id: 31,
                        //         date: '2016-05-01',
                        //         name: 'wangxiaohu',
                        //         address: 'No. 189, Grove St, Los Angeles',
                        // },
                        // {
                        //         id: 32,
                        //         date: '2016-05-01',
                        //         name: 'wangxiaohu',
                        //         address: 'No. 189, Grove St, Los Angeles',
                        // },
                ])
        }, 1000)
}
const tableData1: User[] = [
        {
                id: "1",
                key: "1",
                type: "menu",
                title: "组织管理",
                permissionName: "organization:view",
                icon: "",
                children: [
                        {
                                id: "1-1", key: "1-1", type: 'menu', title: "用户管理",
                                path: "/nav/users",
                                permissionName: "user:view",
                                children: [
                                        {
                                                id: "1-1-1", key: "1-1-1", type:
                                                        "permission", title: "新增用户", permissionName: "user:add"
                                        },
                                        {
                                                id: "1-1-2", key: "1-1-2", type:
                                                        "permission", title: "删除用户", permissionName: "user:del"
                                        },
                                        {
                                                id: "1-1-3", key: "1-1-3", type:
                                                        "permission", title: "编辑用户", permissionName: "user:edit"
                                        },
                                ]
                        },
                        {
                                id: "1-2", key: "1-2", type: 'menu', title: "角色管理",
                                path: '/nav/roles', permissionName: "role:view"
                        },
                        {
                                id: "1-3", key: "1-3", type: 'menu', title: "菜单管理",
                                path: '/nav/menus', permissionName: "menu:view"
                        },
                ]
        },
        {
                id: "2",
                key: "2",
                type: "menu",
                title: "靶场管理",
                permissionName: "labManage:view",
                icon: "",
                children: [
                        {
                                id: "2-1", key: "2-1", type: 'menu', title: "靶场列表",
                                path: '/nav/labsList', permissionName: "lab:view",
                                children: [
                                        {
                                                id: "2-1-1", key: "2-1-1", type: "permission",
                                                title: "新增靶场", permissionName: "lab:add"
                                        },
                                        {
                                                id: "2-1-2", key: "2-1-2", type: "permission",
                                                title: "删除靶场", permissionName: "lab:del"
                                        },
                                        {
                                                id: "2-1-3", key: "2-1-3", type: "permission",
                                                title: "编辑靶场", permissionName: "lab:edit"
                                        },
                                ]
                        }
                ]
        },
]
</script>
    
<style lang="less" scoped>
.Bread {
        width: 100%;
        height: 5%;
        background-color: #F5F5F5;
        box-sizing: border-box;
}

.SearchBox {
        padding-top: 2%;
        display: flex;
}

.demo-ruleForm {
        width: 20%;
        margin-left: 2%;
        margin-right: 2%;
}

.NewBtn {
        width: 20%;
        display: flex;
        justify-content: space-between;
        margin-left: 1%;
}
.Table{
        margin-top: 2%;
        margin-left: 2%;
        width: 95%;
}

</style>